import React from "react";
import { Swiper, Toast } from 'antd-mobile'
import { Flex, Grid, WingBlank } from 'antd-mobile-v2';
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
import './index.scss'

// 导入导航栏的图标
import Nav1 from '../../asset/images/nav-1.png'
import Nav2 from '../../asset/images/nav-2.png'
import Nav3 from '../../asset/images/nav-3.png'
import Nav4 from '../../asset/images/nav-4.png'

// 获取当前定位函数
import { getCurrentCity } from "../../utils";

// 导入环境变量中的url地址
import { BASE_URL } from "../../utils/url";

// 导入搜索栏
import SearchHeader from '../../components/SearchHeader'

// 导航栏菜单
const navs = [
    {
        id: 1,
        img: Nav1,
        title: '整租',
        path: '/home/list'
    },
    {
        id: 2,
        img: Nav2,
        title: '合租',
        path: '/home/list'
    },
    {
        id: 3,
        img: Nav3,
        title: '地图找房',
        path: '/map'
    },
    {
        id: 4,
        img: Nav4,
        title: '去出租',
        path: '/rent/add'
    },
]

// 导航栏
const Navs = () => {
    const navigate = useNavigate()
    return (
        <Flex className="nav">
            {navs.map(item => {
                return (
                    <Flex.Item onClick={() => navigate(item.path)} key={item.id}>
                        <img src={item.img} alt={item.title}></img>
                        <h2>{item.title}</h2>
                    </Flex.Item>
                )
            })}
        </Flex>
    )
}

export default class index extends React.Component {

    state = {
        // 轮播图状态数据
        swipers: [],
        // 租房小组数据
        groups: [],
        // 最新的咨讯
        news: [],
        // 当前城市的名称
        currentCity: '上海'
    }

    // 获取轮播图数据
    getSwiper = async () => {
        const { data: res } = await axios.get('http://localhost:8080/home/swiper')
        if (res.status !== 200) return Toast.show('获取数据异常')
        this.setState({
            swipers: res.body
        })
    }

    // 获取租房小组的数据
    getGroups = async () => {
        const { data: res } = await axios.get("http://localhost:8080/home/groups", {
            params: {
                area: 'AREA%7C88cff55c-aaa4-e2e0'
            }
        })
        if (res.status !== 200) return Toast.show("获取数据异常")
        this.setState({
            groups: res.body
        })
    }

    // 获取最新的咨讯
    getNews = async () => {
        const { data: res } = await axios.get('http://localhost:8080/home/news', {
            params: {
                area: 'AREA%7C88cff55c-aaa4-e2e0'
            }
        })
        if (res.status !== 200) return Toast.show('数据获取异常')
        this.setState({
            news: res.body
        })
    }

    // 获取当前城市信息
    curcity = async () => {
        const curCity = await getCurrentCity()
        this.setState({
            currentCity:curCity.label
        })
    }

    // 页面数据挂载后的钩子函数
    componentDidMount() {
        // 获取轮播图
        this.getSwiper()
        // 获取租房小组
        this.getGroups()
        // 获取最新咨讯
        this.getNews()
        // 通过Ip定位获取到当前城市的名称
        this.curcity()
    }

    // 渲染轮播图
    renderSwiper() {
        return (
            <Swiper loop autoplay autoplayInterval={5000}>
                {
                    this.state.swipers.map(item => {
                        return (
                            <Swiper.Item key={item.id}>
                                <div className="swiper-item">
                                    <img
                                        src={ BASE_URL + item.imgSrc}
                                        alt="轮播图"
                                        style={{ width: '100%', verticalAlign: 'top' }}
                                    ></img>
                                </div>
                            </Swiper.Item>
                        )
                    })
                }
            </Swiper >
        )
    }

    // 渲染最新咨讯
    renderNews() {
        return this.state.news.map(item => {
            return (
                <div className="news-item" key={item.id}>
                    <div className="imgwrap">
                        <img
                            className="img"
                            src={`http://localhost:8080${item.imgSrc}`}
                            alt=""
                        ></img>
                    </div>
                    <Flex className="content" direction="column" justify="between">
                        <h3 className="title">{item.title}</h3>
                        <Flex className="info" justify="between">
                            <span>{item.from}</span>
                            <span>{item.date}</span>
                        </Flex>
                    </Flex>
                </div>
            )
        })
    }

    render() {
        return (
            <div className="index">
                {/* 轮播图 */}
                <div className="swiper">
                    {this.renderSwiper()}
                    {/* 顶部搜索栏 */}
                    <SearchHeader cityName={this.state.currentCity}/>
                </div>

                {/* 导航栏菜单 */}
                <Navs />
                {/* 租房小组 */}
                <div className="group">
                    <h3 className="group-title">
                        租房小组<span className="more"><a>更多</a></span>
                    </h3>
                    <Grid data={this.state.groups} columnNum={2}
                        square={false}
                        hasLine={false}
                        renderItem={(item) => {
                            return (
                                <Flex className="group-item" justify="around" key={item.id}>
                                    <div className="desc">
                                        <p className="title">{item.title}</p>
                                        <span className="info">{item.desc}</span>
                                    </div>
                                    <img
                                        src={`http://localhost:8080${item.imgSrc}`}
                                        alt=""
                                    ></img>
                                </Flex>
                            )
                        }} />
                </div>
                {/* 最新咨讯 */}
                <div className="news">
                    <h3 className="group-title">最新咨讯</h3>
                    <WingBlank size="md">{this.renderNews()}</WingBlank>
                </div>
            </div>

        )
    }
}